<template>
  <el-form ref="dom" :model="form" :rules="rules" status-icon label-width="auto" style="padding: 20px;">
    <el-form-item label="关键词" prop="role_name">
      <el-input v-model="form.key" />
    </el-form-item>
    <el-form-item label="关键词翻译" prop="role_name">
      <el-input v-model="form.describe" />
    </el-form-item>

    <el-form-item label="分类" prop="typeId">
      <el-select
      v-model="form.typeId"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in typeData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    </el-form-item>


    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button @click="close">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, defineEmits, onMounted } from 'vue'
import { WordAdd as adds, WordTypeList as getList} from '../../api/api'
import { ElMessage } from 'element-plus'

import { ElForm, ElFormItem, ElInput } from 'element-plus';
const emit = defineEmits(['item']);
const dom = ref(null);
const form = ref({
})


const rules = reactive({
  user_name: [
    { role_name: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' },
  ],

})
const typeData = reactive([
  {
    label:'正面优化',
    value:1
  },
  {
    label:'负向提示词',
    value:2
  },
  {
    label:'人物',
    value:3
  },
  {
    label:'风格',
    value:4
  }

])

onMounted(() => {

  typeList()
});

const onSubmit = () => {
  console.log(dom)
  dom.value.validate((valid, fields) => {
    console.log(valid)
    if (valid) {
      console.log('submit!', valid)
      adds(form.value).then((res) => {
        console.log('res', res)
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        close()
      })
    } else {
      console.log('error submit!', fields)
    }
  })

}
const close = () => {
  form.value = {};
  emit('item', 'false')
}



const typeList = () => {
  try {
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    getList({}).then((res) => {
      console.log('res', res)
      typeData.value = res.data

    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};

</script>
